<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移动轮播</title>

    <!--<link rel="stylesheet" href="css/global.css">-->
    <!--<link rel="stylesheet" href="css/index.css">-->
    <link rel="stylesheet" href="css/左右移动轮播.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/slides.js"></script>
    <script>
        $(document).ready(function() {
            $('.sbanner_box').slides({
                container: 'box_ul',                  // 幻灯片容器类的名称
                generateNextPrev: false,            // 自动生成下一个/上一个按钮
                next: null,                        // 下一个按钮的类名
                prev: null,                        // 上一个按钮的类名
                pagination: true,                   // 如果你不使用分页，您可以设置为false
                generatePagination: false,          // 自动生成分页
                prependPagination: true,           // 前置分页
                paginationClass: 'nav',            // 用于分页的类的名称
                currentClass: 'on',               // 当前类的类名
                play: 3000,
                pause: true,
                hoverPause: true
            });
        });
    </script>
</head>
<body>
<div class="sbanner">
    <div class="sbanner_box">
        <ul class="clearfix box_ul">
            <li>
                <a href="#"><img src="img/index/pic1.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="img/index/pic2.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="img/index/pic3.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="img/index/pic4.jpg" /></a>
            </li>
        </ul>
        <ol class="nav">
            <li class="on"><a href="#0"></a></li>
            <li><a href="#1"></a></li>
            <li><a href="#2"></a></li>
            <li><a href="#3"></a></li>
        </ol>
    </div>

</div>

</body>
</html>